<script lang="ts">
  import MdEdit from "./MdEdit.svelte";
  import MdPreview from "./MdPreview.svelte";
  import Quizzes from "./Quizzes.svelte";
  import { HSplitPane, VSplitPane } from "$lib/splitpane";
  import type { KV } from "$lib/ebm";

  export let attributes: KV[] = [
    {
      k: "subject",
      v: "en",
    },
  ];

  let fileid = attributes.find((x) => x.k == "file_id");
  let classPointerEventsNone;
  const onMouseDown = () => {
    classPointerEventsNone = "pointer-events-none";
  };
  const onMouseUp = () => {
    classPointerEventsNone = "";
  };

  let root = [
    {
      name: "Important work stuff",
      files: [{ name: "quarterly-results.xlsx" }],
    },
    {
      name: "Animal GIFs",
      files: [
        {
          name: "Dogs",
          files: [{ name: "treadmill.gif" }, { name: "rope-jumping.gif" }],
        },
        {
          name: "Goats",
          files: [{ name: "parkour.gif" }, { name: "rampage.gif" }],
        },
        { name: "cat-roomba.gif" },
        { name: "duck-shuffle.gif" },
        { name: "monkey-on-a-pig.gif" },
      ],
    },
    { name: "TODO.md" },
  ];
</script>

<VSplitPane
  topPanelSize="60%"
  downPanelSize="40%"
  minTopPaneSize="5px"
  minDownPaneSize="5px"
>
  <top slot="top">
    <HSplitPane
      leftPaneSize="50%"
      rightPaneSize="50%"
      minLeftPaneSize="50px"
      minRightPaneSize="50px"
    >
      <left slot="left">
        <MdEdit file_id={fileid.v}>
          Monaco Editor will be placed here: Top Left Pane
        </MdEdit>
      </left>
      <right slot="right">
        <MdPreview file_id={fileid.v}>
          Markdown Preview will be palced here: Top Right Pane
        </MdPreview>
      </right>
    </HSplitPane>
  </top>
  <down slot="down">
    <Quizzes  file_id={fileid.v}/>
  </down>
</VSplitPane>
